<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>协议服务器监控面板</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .server-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .server-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-left: 5px solid #4CAF50;
        }
        .server-card.offline {
            border-left-color: #f44336;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-online {
            background-color: #4CAF50;
        }
        .status-offline {
            background-color: #f44336;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background: #5a6fd8;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .info-item {
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        .websocket-status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .ws-connected {
            background-color: #d4edda;
            color: #155724;
        }
        .ws-disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }
        .client-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
        }
        .client-item {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        .client-item:last-child {
            border-bottom: none;
        }
        .empty-list {
            color: #999;
            font-style: italic;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>多协议服务器监控面板</h1>
            <p>MQTT</p>
        </div>

        <div class="card">
            <h3>服务器总体状态</h3>
            <div class="info-grid" id="serverOverview">
                <div class="info-item">
                    <strong>总服务器数:</strong> <span id="totalServers">-</span>
                </div>
                <div class="info-item">
                    <strong>运行中:</strong> <span id="runningServers">-</span>
                </div>
                <div class="info-item">
                    <strong>状态:</strong> <span id="overallStatus">-</span>
                </div>
                <div class="info-item">
                    <strong>最后更新:</strong> <span id="lastUpdate">-</span>
                </div>
            </div>
            <button class="btn" onclick="refreshData()">刷新状态</button>
        </div>

        <div class="server-grid" id="serverCards">
            <!-- 服务器卡片将在此处动态生成 -->
        </div>

        <div class="card">
            <h3>MQTT客户端连接列表</h3>
            <button class="btn" onclick="refreshClientList()">刷新客户端列表</button>
            <div class="client-list" id="clientList">
                <div class="empty-list">暂无客户端连接</div>
            </div>
        </div>

        <div class="card">
            <h3>系统信息</h3>
            <div class="info-grid" id="systemInfo">
                <!-- 系统信息将在此处显示 -->
            </div>
        </div>
    </div>

    <script>
        let websocket = null;

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            refreshData();
            refreshSystemInfo();
            refreshClientList();
            setInterval(refreshData, 5000); // 每5秒刷新一次
            setInterval(refreshClientList, 10000); // 每10秒刷新客户端列表
        });

        // 刷新服务器状态数据
        async function refreshData() {
            try {
                const response = await fetch('/api/status');
                const data = await response.json();
                
                updateServerOverview(data);
                updateServerCards(data.servers);
                
                document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            } catch (error) {
                console.error('获取服务器状态失败:', error);
            }
        }

        // 更新服务器总览
        function updateServerOverview(data) {
            document.getElementById('totalServers').textContent = data.totalServers;
            document.getElementById('runningServers').textContent = data.runningServers;
            document.getElementById('overallStatus').textContent = data.allRunning ? '正常' : '异常';
        }

        // 更新服务器卡片
        function updateServerCards(servers) {
            const container = document.getElementById('serverCards');
            container.innerHTML = '';

            for (const [key, server] of Object.entries(servers)) {
                const card = document.createElement('div');
                card.className = `server-card ${server.running ? 'online' : 'offline'}`;
                
                card.innerHTML = `
                    <h4>
                        <span class="status-indicator ${server.running ? 'status-online' : 'status-offline'}"></span>
                        ${server.name}
                    </h4>
                    <p><strong>状态:</strong> ${server.running ? '运行中' : '已停止'}</p>
                    <p><strong>Bean名称:</strong> ${key}</p>
                    ${getServerSpecificInfo(key, server.name)}
                `;
                
                container.appendChild(card);
            }
        }

        // 获取特定服务器的额外信息
        function getServerSpecificInfo(beanName, serverName) {
            const buttons = [];
            
            if (serverName === 'Modbus TCP') {
                buttons.push('<button class="btn" onclick="getModbusData()">获取Modbus数据</button>');
            } else if (serverName === 'IEC 60870-5-104') {
                buttons.push('<button class="btn" onclick="getIec104Data()">获取IEC104数据</button>');
            }
            
            return buttons.join('');
        }

        // 获取系统信息
        async function refreshSystemInfo() {
            try {
                const response = await fetch('/api/info');
                const data = await response.json();
                
                const container = document.getElementById('systemInfo');
                container.innerHTML = `
                    <div class="info-item">
                        <strong>应用程序:</strong> ${data.application}
                    </div>
                    <div class="info-item">
                        <strong>版本:</strong> ${data.version}
                    </div>
                    <div class="info-item">
                        <strong>Java版本:</strong> ${data.runtime.javaVersion}
                    </div>
                    <div class="info-item">
                        <strong>总内存:</strong> ${data.runtime.totalMemory}
                    </div>
                    <div class="info-item">
                        <strong>可用内存:</strong> ${data.runtime.freeMemory}
                    </div>
                    <div class="info-item">
                        <strong>处理器:</strong> ${data.runtime.processors}
                    </div>
                `;
            } catch (error) {
                console.error('获取系统信息失败:', error);
            }
        }

        // 刷新MQTT客户端列表
        async function refreshClientList() {
            try {
                const response = await fetch('/api/mqtt/clients');
                const data = await response.json();
                
                updateClientList(data);
            } catch (error) {
                console.error('获取MQTT客户端列表失败:', error);
            }
        }

        // 更新客户端列表显示
        function updateClientList(data) {
            const container = document.getElementById('clientList');
            
            if (data.success && data.count > 0) {
                let clientHtml = '';
                const clients = data.clients;
                for (let i = 0; i < clients.length; i++) {
                    clientHtml += `<div class="client-item">客户端 ${i + 1}: ${clients[i]}</div>`;
                }
                container.innerHTML = clientHtml;
            } else {
                container.innerHTML = '<div class="empty-list">暂无客户端连接</div>';
            }
        }
    </script>
</body>
</html>